<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>抽奖记录</title>
    <link href="__ADDON__/css/weui.css" rel="stylesheet"/>
    <link href="__ADDON__/css/weui2.css" rel="stylesheet"/>
    <link href="__ADDON__/css/weui3.css" rel="stylesheet"/>
    <script type="text/javascript" src="__ADDON__/js/zepto.min.js"></script>
    <script type="text/javascript" src="__ADDON__/js/lazyimg.js"></script>
    <script type="text/javascript" src="__ADDON__/js/updown.js"></script>
    <style>
        body {
            margin: 0px;
        }

        .weui_panel {
            margin-top: 40px;
        }

        /*顶部*/
        .header {
            height: 40px;
            background: #015198;
            color: #fff;
            line-height: 40px;
            position: fixed;
            width: 100%;
            font-size: 14px;
            z-index: 999;
            top: 0
        }

        .header .header_l {
            padding-left: 3%;
            width: 12%;
            display: block;
            float: left;
        }

        .header .header_c {
            text-align: center;
            width: 70%;
            display: block;
            float: left;
        }

        .header .header_r {
            text-align: right;
            width: 12%;
            display: block;
            float: left;
        }

        .header i {
            font-size: 20px;
            line-height: 40px;
            color: #fff;
        }

        .weui_panel_bd {
            padding: 20px;
        }

        .weui_media_bd {
            margin-bottom: 10px;
            border-bottom: 1px dashed #d9d9d9;
            height: 55px;
        }

        h4.weui_media_title {
            color: #3d4145;
        }

        p.weui_media_desc {
            font-size: 14px;
            color: #999999;
        }

        span.time {
            float: left;
        }

        span.status {
            float: right;
        }

    </style>
    <script>
        $(document).ready(function () {
            //页面第一次加载
            log_list();
        })
    </script>
</head>
<body ontouchstart style="background-color: #fff;">
<header class="header" style="background:#DF1D02;">
    <span class="header_l"><a  href="javascript :;" onClick="javascript :history.back(-1);" style="background-color: unset;padding: unset;color: #fff;">返回</a></span>
    <span class="header_c">抽奖记录</span>
    <span class="header_r"><a href="#" style="background-color: unset;padding: unset"><i
            class="fa fa-user"></i></a></span>
</header>
<div class="searchbar_wrap"></div>
<div class="weui_panel weui_panel_access">
    <div class="weui_panel_bd"></div>
</div>
<script>
    var GETLOGS_URL = "{:addon_url('luckydraw/index/getJson')}";

    function log_list() {
        var timer;
        //页数
        var page = 0;
        // 每页展示10个
        var size = 10;
        $('.weui_panel').dropload({
            scrollArea: window,
            autoLoad: true,
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad: '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData: '<div class="dropload-noData">没有更多数据了</div>'
            },
            loadDownFn: function (me) {
                //window.history.pushState(null, document.title, window.location.href);
                var result = '';
                var data = {
                    'offset': page,
                    'limit': size
                };
                page++;
                $.ajax({
                    type: 'POST',
                    url: GETLOGS_URL,
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        //console.log(data);
                        if (data.code == 200) {
                            var arrLen = data.rows.length;
                            if (arrLen > 0) {
                                for (var i = 0; i < arrLen; i++) {
                                    result += '<div class="weui_media_bd">'
                                        + '<h4 class="weui_media_title">' + data.rows[i].price + ' </h4>'
                                        + '<p class="weui_media_desc"><span class="time">抽奖时间:' + data.rows[i].createtime + '</span><span class="status">兑换状态:' + data.rows[i].redeemtime + '</span></p>'
                                        + '</div>';
                                }
                                // 如果没有数据
                            } else {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                        }

                        clearTimeout(timer);
                        // 为了测试，延迟1秒加载
                        timer = setTimeout(function () {
                            $('.weui_panel_bd').append(result);
                            var lazyloadImg = new LazyloadImg({
                                el: '.weui-updown [data-img]', //匹配元素
                                top: 50, //元素在顶部伸出长度触发加载机制
                                right: 50, //元素在右边伸出长度触发加载机制
                                bottom: 50, //元素在底部伸出长度触发加载机制
                                left: 50, //元素在左边伸出长度触发加载机制
                                qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
                                load: function (el) {
                                    el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
                                },
                                error: function (el) {
                                }
                            });
                            //
                            // 每次数据加载完，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        console.log('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
</script>
</body>
</html>
